<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>
      <div class="container">
            <div class="control">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box">内容1</div>
                  <div class="box">内容2</div>
                  <div class="box">内容3</div>
            </div>
      </div>
      <script>
            // var btns = document.querySelectorAll(".control button");
            // var boxs = document.querySelectorAll(".box")
            // for (var i = 0; i < btns.length; i++) {
            //       btns[i].index = i;
            //       btns[i].onclick = function () {
            //             // 获取到按钮的下标;
            //             var index = this.index
            //             // 隐藏所有元素;
            //             for (var i = 0; i < boxs.length; i++) {
            //                   boxs[i].style.display = "none";
            //             }
            //             // 显示当前的元素
            //             boxs[index].style.display = "block";
            //       }
            // }
            // 1. 自己画一张图片; 连线并注释 构造函数，实例对象，原型对象三者关系;
            // 2. 编写parent构造函数; 并创建一个自我介绍功能;
            // 3. 选项卡改写;  构造函数里面放数据; 原型对象里面放算法;



            function jiedian(jd) {
                  // 获取节点
                  this.fu = document.querySelector(jd);
                  this.btn = this.fu.querySelectorAll("button");
                  this.box = this.fu.querySelectorAll(".box");
                  // 设置索引
                  this.index = 0;
                  this.bindEvent();
                  // 触发点击事件
                  this.btn[0].click()
            }

            // 事件绑定功能
            jiedian.prototype.bindEvent = function () {
                  let _this = this;
                  for (let i = 0; i < this.btn.length; i++) {
                        this.btn[i].index = i;
                        // 设置点击事件
                        this.btn[i].onclick = function () {
                              _this.index = this.index
                              _this.changeEvent()
                        }
                  }
            }

            // 切换内容功能
            jiedian.prototype.changeEvent = function () {
                  let _this = this;
                  // 改变btn的样式
                  for (let j = 0; j < _this.box.length; j++) {
                        _this.box[j].style.display = "none";
                  }
                  _this.box[_this.index].style.display = "block";
            }

            let huoqu = new jiedian(".container")

      </script>
</body>

</html>